<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <title>后台管理系统</title>

    <link rel="stylesheet" type="text/css"
          href="/static/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css"
          href="/static/easyui/themes/icon.css">
    <script type="text/javascript"
            src="/static/easyui/jquery.min.js"></script>
    <script type="text/javascript"
            src="/static/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript"
            src="/static/easyui/locale/easyui-lang-zh_CN.js"></script>

    <style type="text/css">
        ul{
            line-height: 30px;
        }
    </style>
</head>
<body class="easyui-layout">
<!-- 顶部 -->
<div data-options="region:'north',split:true" style="height:80px;">
    <br>&nbsp;&nbsp;&nbsp;&nbsp;<font size="6px" color="black">  后 台 管 理 </font></font>
    <!-- 登录用户信息 -->
    <div id="loginDiv" style="position: absolute;right: 20px;top: 20px;">
    </div>

    <!-- javascript:是伪协议，表示url的内容通过javascript执行。void(0)表示不作任何操作 -->
    <div id="themesDiv" style="position: absolute;right: 20px;top:40px;">
        <a href="javascript:void(0)" id="mb" class="easyui-menubutton"
           data-options="menu:'#Themesmeus',iconCls:'icon-edit'">切换风格</a>
        <div id="Themesmeus" style="width:150px;">
            <div>default</div>
            <div>gray</div>
            <div>black</div>
            <div>bootstrap</div>
            <div>material</div>
            <div>metro</div>
        </div>
    </div>
</div>

<!-- 底部 -->
<div data-options="region:'south',split:true" style="height:30px;">
    <div id="copyrightDiv" style="text-align: center;">
        jzz&copy;管理系统
    </div>
</div>

<!-- 左边系统菜单 -->
<div data-options="region:'west',title:'系统菜单',split:true" style="width:200px;">
    <div id="aa" class="easyui-accordion" style="width:193px;" data-options="border:0,multiple:true" >
        <div title="人员管理"  data-options="iconCls:'icon-man'" style="overflow:auto;padding:10px;">
            <ul>
                <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-man'" pageUrl="tomanageadmin">管理员管理</a>
                <br>
                <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-man',plain:true" pageUrl="tomanageteacher">教师管理</a>
                <br>
                <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-man',plain:true" pageUrl="tomanagestudent">学生管理</a>
            </ul>
        </div>
        <div title="考试查询" data-options="iconCls:'icon-group'" style="padding:10px;">
            <ul>
                <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-definition',plain:true"  pageUrl="tomanageExam">所有考试课程</a>
            </ul>
        </div>
        <div title="系统管理" style="padding: 10px" align="center">
            <a href="alogin" class="easyui-linkbutton" data-options="iconCls:'icon-signout',plain:true" >退出后台管理</a>
        </div>
    </div>
</div>

<!-- 中间编辑区域 -->
<div data-options="region:'center'" style="padding:5px;background:#eee;">
    <div id="tt" class="easyui-tabs" style="width:500px;height:250px;" data-options="fit:true">
        <div title="起始页" style="padding:20px;display:none;">
            欢迎登录教师后台管理系统
        </div>
    </div>
</div>


<script type="text/javascript">
    $(function(){
        //给a标签绑定时间
        $("a[pageUrl]").click(function(){
            //1.获取pageUrl属性值（需要跳转的页面地址）
            var pageUrl = $(this).attr("pageUrl");
            //获取a标签的内容，标题
            var title = $(this).text();

            //2.判断是否存在指定标题的选项卡
            if( $("#tt").tabs("exists",title)  )  {
                //3.如果存在，则选项该选项卡
                $("#tt").tabs("select",title);
            }else{
                //4.如果不存在，则添加选项卡
                $("#tt").tabs("add",{
                    title:title,
                    content:"<iframe src='"+pageUrl+"' width='100%' height='100%' frameborder='0'><iframe>",
                    closable:true
                });
            }
        });

        //点击切换模块菜单的时候，进行切换模块
        $("#Themesmeus").menu({
            onClick:function(item){
                //1.获取需要改变的模块名称
                var themeName = item.text;

                //2.获取link标签的href属性
                var href= $("#themeLink").attr("href");

                //3.更改href的属性值
                // easyui/themes/default/easyui.css
                href = href.substring(0,href.indexOf("themes"))+"themes/"+themeName+"/easyui.css";

                //4.更新link的href属性
                $("#themeLink").attr("href",href);
            }
        });
    });

</script>
</body>
</html>
</html>